<script>
export default {
  name: "zoetrope",
  props: {
    swiperList: {
      type: Array,
      default: () => []
    },
    isAutoplay: {
      type: Boolean,
      default: true,
    },
    iflogin: {
      type: Boolean,
      default: false,
    },
    report_analysis: {
      type: Object,
    }
  },
  data() {
    return {
      swiper: {
        realIndex: 0
      },
      containerHeight: 0, // 整个容器高低
    }
  },
  computed: {
    totalPages() {
      return this.swiperList.length;
    },
  },
  created() {

  },
  mounted() {

  }
  ,
  methods: {
    // 选择图片
    cardSwiper(e) {
      this.swiper.realIndex = e.detail.current
    }
    ,
    // 加载第一张图片
    onImageLoad(index, e) {
      // 容器 最大高度
      const maxHeight = uni.getSystemInfoSync().screenHeight - 30
      // 如果是第一张图片，设置容器高度
      if (index === 0) {
        // 编译到所有平台通用
        const screenWidth = uni.getSystemInfoSync().screenWidth
        let heightNaturalRatio = e.detail.height / e.detail.width * screenWidth;
        this.containerHeight = Math.floor(heightNaturalRatio)
      }
    },
    onPAth(item) {
      console.log(item.url_wxxcx)
      if (item.url_wxxcx !== '') {
        uni.navigateTo({
          url: item.url_wxxcx,
        })
      }
    },
    onLog() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    onMy() {
      uni.switchTab({
        url: '/pages/my/my'
      })
    },
    emotionalReport() {
      if (this.report_analysis.report_analysis_switch === '' || this.report_analysis.report_analysis_id === '') return
      if (this.iflogin) {
        uni.navigateTo({
          url: `/pagesB/lovetest/lovetest?id=${this.report_analysis.report_analysis_id}`,
        })
      } else {
        uni.navigateTo({
          url: '/pages/login/login',
        })
      }
    },
    getMateshow() {
      if (this.iflogin) {
        uni.navigateTo({
          url: '/myPages/mateshow/mateshow',
        })
      } else {
        uni.navigateTo({
          url: '/pages/login/login',
        })
      }
    },
  }
}
</script>

<template>
  <view class="zoetrope">
    <view class="swiper-container">
      <swiper :autoplay="isAutoplay" :circular="true" :style="{'height': containerHeight+'px'}" class="card-swiper "
              duration="500" interval="5000"
              @change="cardSwiper">
        <swiper-item v-for="(item,homeIndex) in swiperList" :key="item.i">
          <view class="swiper-item" @tap="onPAth(item)">
            <image ref="scaledImage" :src="item.img" mode="aspectFit" @load="onImageLoad(homeIndex, $event)"></image>
          </view>
        </swiper-item>
      </swiper>
      <view class="zoetropeButton">
        <view class="customizeBnt">
          <view class="text" @tap="getMateshow">
            AI有风情感定制
          </view>
          <view class="customizeIcon">
            <text class="alyIcon-a-jiantoushoubingjiantou jiantoushoubingjiantou"></text>
          </view>
        </view>
        <view class="zoetropeBox">
          <view class="bntLeft" @tap="emotionalReport">情感报告分析</view>
          <view v-if="iflogin" class="bntRight" @tap=" onMy">个人中心</view>
          <view v-else class="bntRight" @tap="onLog">登录/注册</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import 'zoetrope.scss';
</style>